<template>
  <div class="tool-box" :style="calcBoxStyle">
    <div class="tool-box-cell   tool-title" :style="calcTitle">
      标题
    </div>
    <div class="tool-box-cell   tool-header" :style="calcHeader">
      列头
    </div>
    <div class="tool-box-cell   tool-body" :style="calcBody">
      明细
    </div>
    <div class="tool-box-cell   tool-footer" :style="calcFooter">
      列脚
    </div>
    <div class="tool-box-cell   tool-summary" :style="calcSummary">
      摘要
    </div>
  </div>
</template>
<script>
// Title
// ColumnHeader
// Body
// ColumnFooter
// Summary
export default {
  inject: ['gridView'],
  computed: {
    // calcClass() {
    //   const c = [];
    //   const index = this.currentCell.findIndex(item => {
    //     return item.RowIndex === this.cell.RowIndex &&
    //       item.ColumnIndex === this.cell.ColumnIndex;
    //   });

    //   if (index > -1) {
    //     c.push('active');
    //   }

    //   return c;
    // },
    calcTitle() {
      const titles = this.gridView.Rows.filter(a => a.Type === 'Title');
      let h = 0;
      titles.forEach(element => {
        h += element.Height;
      });

      return {
        height: h + 'px',
        display: h > 0 ? 'flex' : 'none',
      };
    },
    calcHeader() {
      const titles = this.gridView.Rows.filter(a => a.Type === 'ColumnHeader');
      let h = 0;
      titles.forEach(element => {
        h += element.Height;
      });
      return {
        height: h + 'px',
        display: h > 0 ? 'flex' : 'none',
      };
    },
    calcBody() {
      const titles = this.gridView.Rows.filter(a => a.Type === 'Detail');
      let h = 0;
      titles.forEach(element => {
        h += element.Height;
      });
      return {
        height: h + 'px',
        display: h > 0 ? 'flex' : 'none',

      };
    },
    calcFooter() {
      const titles = this.gridView.Rows.filter(a => a.Type === 'ColumnFooter');
      let h = 0;
      titles.forEach(element => {
        h += element.Height;
      });
      return {
        height: h + 'px',
        display: h > 0 ? 'flex' : 'none',

      };
    },
    calcSummary() {
      const titles = this.gridView.Rows.filter(a => a.Type === 'Summary');
      let h = 0;
      titles.forEach(element => {
        h += element.Height;
      });
      return {
        height: h + 'px',
        display: h > 0 ? 'flex' : 'none',

      };
    },

    calcBoxStyle() {
      const obj = {
        zIndex: 1000,
        position: 'absolute',
      };
      return obj;
    },
  },
  mounted() {

  },
  methods: {

  },
};
</script>
<style lang="css">
.tool-box {
  background-color: #f0f0f0;
  font-size: 9px;
}

.tool-box-cell {
  writing-mode: tb;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  min-height: 30px;
  box-sizing: border-box;
}
</style>
